<template>
	<view class="content display displayColumn ">
		<!-- 导航栏 -->
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<!-- 返回按钮 -->
				<uni-icons type="left" color="#212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">我的油卡</text>
			</template>
		</u-navbar>

		<view class="fn_content display width-100  displayColumn displaycenter_aliem" v-if="arr.length > 0">
			<view class="fn_all_one display  displayColumn M-T20" @click="todetail(item)" v-for="(item,index) in arr"
				:key="index">
				<view class="fn_one display  displaycenter_aliem M-T24">
					<span class="fn_txt1 M-L24">{{item.stationName}}</span>
					<span class="fn_txt2 M-R24">面值￥{{item.originPrice}}</span>
				</view>
				<view class="fn_two display  displaycenter_aliem width-100 M-T20" style="text-align: bottom;">
					<span class="wode1 M-L24">￥<span style="font-size: 52rpx;">{{item.balance}}</span></span>
					<span class="fn_mingxi" style="margin-left: 12rpx;">明细</span>
				</view>
				<view class="fn_three display  displaycenter_aliem width-100">
					<span class="fn_yue" style="margin-left: 24rpx;">余额</span>
					<button class="lijijiayou display all_item" style="margin-right: 24rpx;"
						@click.stop="lijijiayou(item)">立即加油</button>
				</view>
			</view>
		</view>
			<view class="app-desc" @click="getInvalidCards()">已用完加油卡</view>
		
		<u-popup :show="show1" @close="close" mode="bottom" :round="25" :safeAreaInsetBottom="false"
			:closeOnClickOverlay="true" :closeable="true">
			<view class="fn_popup1 display displayColumn " style="border-radius: 25rpx;">
				<span class="fn_select M-L30" style="margin-top: 30rpx;">选择油号</span>
				<view class="fn_xuanz width-100 display displaycenter_aliem  M-T30">
					<view class=" display border all_item"
						:class="{fn_items:selectYouhaoIndex==index,fn_item1:selectYouhaoIndex!=index}"
						v-for="(item,index) in youhaoArr" :key="index" @click="selectYouhaoIndex=index">
						<span class="fn_jiayou"
							:class="{fn_jiayou:selectYouhaoIndex==index,fn_jiayou1:selectYouhaoIndex!=index}">{{item}}</span>
					</view>
				</view>
				<span class="fn_select M-T30 M-L30">选择油枪</span>
				<view class="fn_xuanz width-100 display displaycenter_aliem M-T30">
					<view class=" display border all_item"
						:class="{fn_items:selctYouqaing==index,fn_item1:selctYouqaing!=index}"
						v-for="(item,index) in youqiangArr" :key="index" @click="selctYouqaing=index">
						<span class="fn_jiayou"
							:class="{fn_jiayou:selctYouqaing==index,fn_jiayou1:selctYouqaing!=index}">{{item}}</span>
					</view>
				</view>
				<view class="fn_wode display width-100 displaycenter_aliem M-L30" style="margin-top: 30rpx;">
					<span style="margin-left: 24rpx;">请先加油后付款</span>
				</view>
				<view class="fn_xuanz width-100 display displaycenter_aliem M-T30">
					<view class=" display border all_item"
						:class="{fn_items:selectMoney==index,fn_item1:selectMoney!=index}"
						v-for="(item,index) in moneyArr" :key="index" @click="selectMoney=index">
						<span class="fn_jiayou"
							:class="{fn_jiayou:selectMoney==index,fn_jiayou1:selectMoney!=index}">{{item}}</span>
					</view>
				</view>
				<view class="display width-100 all_item " style="margin-top: 60rpx;">
					<button class="wode_btns display all_item" @click="cashout">立即支付￥100</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import UQRCode from '@/utils/uqrcode.js';
	export default {
		data() {
			return {
				arr: [],
				show1: false,
				code: '123',
				price: '',
				youhaoArr: ['#92', '#95', '#98', '#0'],
				selectYouhaoIndex: 0,
				youqiangArr: ['1', '2', '3', '4'],
				selctYouqaing: 0,
				moneyArr:[100,200,300],
				selectMoney:0,
				item:{}
			}
		},
		onReady() {

			this.getCode()

		},
		onLoad() {
			this.getList();
		},
		methods: {
			close() {
				this.show1 = false
			},
			lijijiayou(item) {
				this.item = item
				this.code = item.code
				this.price = item.originPrice;
				this.show1 = true;
				// this.getCode()
			},
			cashout(){
				let data = {
					id:this.item.id,
					payAmount:this.moneyArr[this.selectMoney],
					gunName:this.youqiangArr[this.selctYouqaing],
					petrolName:this.youhaoArr[this.selectYouhaoIndex],
				}
				this.$req.post('/xcx/petrolCard/cardPay',data).then(res=>{
					console.log(res)
					if (res.data.code == 200) {
						this.$modal.msg("支付成功");
						this.show1 = false;
						this.getList();
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			getCode() {

				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = this.code;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 161; //默认为px
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			},
			getList() {
				let data = {
					cardStatus: 0,
					pageSize: 100,
					pageNum: 1
				}
				this.$req.get('/xcx/petrolCard/list', data).then(res => {
					this.arr = res.data.rows;
				})
			},
			getInvalidCards() {
				uni.navigateTo({
					url: '/packageC/jiayouka/jiayoukaInvalids'
				})
			},
			todetail(item) {
				uni.navigateTo({
					url: '/packageC/jiayoukaDetails/jiayoukaDetails?item=' + JSON.stringify(item)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		font-weight: 600;
		font-size: 34rpx;
		color: #232323;
	}

	.fn_all_one {
		width: 690rpx;
		height: 226rpx;
		background: linear-gradient(134deg, #459CF8 0%, #126BC9 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.fn_one {
		justify-content: space-between;
	}

	.fn_txt1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.fn_txt2 {
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.wode1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.fn_mingxi {
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.fn_yue {
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.lijijiayou {
		// width: 136rpx;
		height: 54rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #126BC9;

	}

	.fn_popup {
		width: 526rpx;
		height: 636rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.fn_ggbao {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_popup1 {
		width: 750rpx;
		height: 802rpx;
		background: #FFFFFF;
	}

	.fn_select {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_items {
		width: 152rpx;
		height: 62rpx;
		background: #126BC9;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.fn_item1 {
		width: 152rpx;
		height: 62rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #72778A;
	}

	.fn_jiayou {
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.fn_jiayou1 {
		font-weight: 400;
		font-size: 24rpx;
		color: #212121;
	}

	.fn_xuanz {
		justify-content: space-around;
	}
	.fn_wode{
		width: 692rpx;
		height: 82rpx;
		background: rgba(18,107,201,0.1);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid;
		border-image: linear-gradient(90deg, rgba(23, 105, 143, 1), rgba(173, 157, 246, 1), rgba(23, 105, 143, 1)) 2 2;
		span{
			font-weight: 600;
			font-size: 24rpx;
			color: #126BC9;
		}
	}
	.app-desc {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		position: fixed;
		width: 100%;
		display: flex; /* 使用 Flexbox 布局 */
		justify-content: center; /* 水平居中 */
		bottom: 30px;
	}
	.wode_btns{
		width: 690rpx;
		height: 66rpx;
		background: #126BC9;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
	}
</style>